import React, { FC, useState, useRef } from 'react'
import axios from 'axios';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import {faUser,faPassport} from '@fortawesome/free-solid-svg-icons'
import { Dialog, ImageView } from 'components'
import { useHistory, useLocation, useParams, useRouteMatch } from 'react-router-dom'

interface LoginProps {

}

const Login:FC<LoginProps> = (props) => {
  const [showDialog, setShowDialog] = useState<boolean>(true)

  const history = useHistory();
  const location = useLocation();
  const params = useParams();
  const match = useRouteMatch();

  console.log('-------->', history, location, params, match)

  const account: any = useRef();
  const password: any = useRef();
  const handleSubmit = async () => {
    const data = await axios.post('http://localhost:8000/users/login', {
      account: account.current.value,
      password: password.current.value
    })
    console.log('data:', data.data)

    if (data.data.code === 0) {
      history.push('/home')
    }
  }
  return <div>

    {
      showDialog && <Dialog onClick={() => {
        setShowDialog(false)
      }}/>
    }
    <div style={{display: 'flex', justifyContent: 'center', 'alignContent': 'center', padding: '35px'}}>
      <ImageView
        round={true}
        width={100}
        height={100}
        src={'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201812%2F30%2F20181230144326_yzofb.thumb.700_0.jpg&refer=http%3A%2F%2Fb-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1627560206&t=6c675d51c637905430ff83b3a4c83722'}
        />
    </div>




     账号：<FontAwesomeIcon icon={faUser}/> <input ref={account} /> <br />
     密码： <FontAwesomeIcon icon={faPassport} /> <input ref={password} />
     <hr />
     <button onClick={() => handleSubmit()}>登陆</button>
  </div>
}
export default Login;


// FC<>  ：这一种方式，既可以注解props参数，还能同时注解 函数组件返回值
// props: LoginProps：这一种方式，只能直接参数；


// 在哪儿定义，就在哪儿注解

// cookie ：
/**
 * cookie:
 * 定义：是一个一般用来做登陆的前端存储的一个文本；保存在本地存储中的cookie中；
 * 大小：4kb
 * 作用：用来跟服务端进行交互的一个文本（登陆身份识别）
 * 好处：后端设置（过期时间、主机、域名），前端不能控制；
 * 坏处：csrf攻击（跨站伪造）
 *
 * cookie只要在浏览器中存在，在访问接口的时候，会自动携带
 *
 *
 *
 * token的好处是什么？安全
 * 坏处：前端存储。前端控制，后端不能在一段时间内完全控制它；
 * token 存在本次存储 --->  jwt.verfiy('token', 'secret_key')
 *
 */
